<template>
  <div>
    <a-modal v-model="visible" title="结算" :width="900" centered :destroyOnClose="true" class="return-modal" :footer="false" :maskClosable="false">
      <a-steps :current="current" size="small" style="width:70%;margin:0 auto;">
        <a-step v-for="item in steps" :key="item.title" :title="item.title" />
      </a-steps>
      <div class="steps-content" v-if="current == 0">
        <a-table :loading="loading" :rowKey="record => record.id" :columns="columns" :data-source="comfirmGoods" :pagination="false" :rowSelection="rowSelection">
          <span slot="goods" slot-scope="text, record">
            <div style="display: flex; align-items: center">
              <ListInfo :record="record"></ListInfo>
            </div>
          </span>
          <span slot="price" slot-scope="text, record">
            <p class="red special-price">¥ {{ record.priceActual }}</p>
            <p class="has-special origin-price">¥ {{ text }}</p>
          </span>
        </a-table>
      </div>
      <div class="steps-content" v-if="current == 1">
        <a-spin :spinning="paySpinning">
          <a-table :loading="loadingPay" :rowKey="record => record.id" :columns="columns2" :data-source="payGoodsList" :pagination="false">
            <span slot="goods" slot-scope="text, record">
              <div style="display: flex; align-items: center;position: relative;">
                <ListInfo :record="record"></ListInfo>
                <span class="gift gift-ab" v-if="record.gift">赠品</span>
              </div>
            </span>
            <span slot="price" slot-scope="text, record">
              <p class="red special-price">¥ {{ record.priceActual }}</p>
              <p class="has-special origin-price">¥ {{ text }}</p>
            </span>
            <span slot="action" slot-scope="text, record" class="good-status">
              <div class="left" v-show="record.discount3 != undefined">
                <div class="discount">
                  <img src="../../assets/images/pay1.png" alt="" />
                  <span>{{ calcDiscount(record) }}</span>
                </div>
                <div class="warning" v-if="calcwWarn(record)">
                  <img src="../../assets/images/pay2.png" alt="" />
                  <span v-if="record.productAttr == 1 || record.productAttr == 2">该商品低于安全折扣</span>
                </div>
              </div>
              <div v-if="discountChange" class="switch">
                <span style="margin-right:8px">商场折扣</span>
                <a-switch v-model="record.joinShopSwitch" size="small" @change="goodJoinShop(record)" />
              </div>
            </span>
          </a-table>
          <div style="margin-top:24px;display:flex;align-items:center">
            商场卡折扣:
            <a-switch v-model="discountChange" @change="switchDiscount" size="small" style="margin:0 12px" />
            <template v-if="discountChange">
              <span v-if="!editDisount"
                ><span class="discount-input">{{ curShopDiscount }}</span
                ><a-button type="primary" @click="editDisount = true" style="margin-left:12px" size="small">修改</a-button></span
              >
              <span v-if="editDisount">
                <a-input-number v-model="shopDiscount" :min="0.9" :max="1" :step="0.01" class="discount-input" placeholder="最小折扣0.9" :autoFocus="true" style="width:100px" />
                <a-button type="primary" @click="completeDiscount" style="margin-left:12px" size="small"> 完成 </a-button>
              </span>
            </template>
          </div>
          <!-- 策略 -->
          <section class="paneldetail">
            <div class="coupon_wrap strategy_wrap">
              <span>参与单品促销策略</span>
              <div class="Switch">
                <a-switch v-model="strategyChange" @change="switchStrategy" size="small" />
                <!-- <input type="checkbox" name="Storage2" id="integral" />
              <label for="integral" :class="strategyChange ? 'checklabel' : ''" @click="switchStrategy"><em :class="strategyChange ? 'checkem' : ''"></em></label> -->
              </div>
            </div>
            <div class="coupon_wrap strategy_wrap" v-if="strategyChange">
              <span
                >已自动匹配<span class="blue">{{ strategyList.length }}</span
                >个最优促销策略
              </span>
              <a-button @click="openStrategy" v-if="strategyList.length > 0" size="small">查看</a-button>
            </div>
          </section>
          <section class="paneldetail">
            <div class="coupon_wrap strategy_wrap">
              <span>参与组合促销策略</span>
              <div class="Switch">
                <a-switch v-model="strategyChangeMutli" @change="switchStrategyMutli" size="small" />
              </div>
            </div>
            <div class="coupon_wrap strategy_wrap" v-if="strategyChangeMutli">
              <span
                >已自动匹配<span class="blue">{{ strategyListMutli.length }}</span
                >个最优促销策略
              </span>
              <a-button @click="openStrategyMutli" v-if="strategyListMutli.length > 0" size="small">查看</a-button>
            </div>
          </section>
          <section class="paneldetail">
            <div class="coupon_wrap">
              <span class="name">使用优惠券</span>
              <div class="sales" v-if="cardDesc == null">无可用券</div>
              <div class="sales" v-if="cardDesc != ''">{{ cardDesc }}</div>
              <a-button @click="visibleVoucher = true" v-if="cardDesc != null" size="small">请选择</a-button>
            </div>
            <div class="coupon_wrap" v-if="inshow" style="padding-top: 0px;">
              <span class="dikou">{{ availableIntegral }}积分抵{{ convertibleAmount }}元券</span>
              <div class="Switch">
                <a-switch @change="switchchange" size="small" />
                <!-- <input type="checkbox" name="Storage2" id="integral" />
              <label for="integral" :class="integralCouponCard ? 'checklabel' : ''" @click="switchchange"><em :class="integralCouponCard ? 'checkem' : ''"></em></label> -->
              </div>
            </div>
          </section>
          <section style="padding-top:16px;">
            <div class="paylist">
              <span class="paytext">商品金额</span>
              <span>¥{{ totalPrice }}</span>
            </div>
            <div v-if="discountinfo.length > 0">
              <div class="paylist" v-for="(item, childindex) in discountinfo" :key="childindex">
                <template v-if="item.zktype != 10">
                  <span class="paytext">{{ item.zkmemo }}</span>
                  <span>- ¥{{ item.zkmoney }}</span>
                </template>
                <template v-else>
                  <span class="paytext" style="margin-bottom:8px;">活动优惠</span>
                  <span>- ¥{{ item.zkmoney }}</span>
                  <div class="activity">
                    <span class="paytext" @click="showRules = true">{{ item.zkmemo }} <van-icon name="question-o"/></span>
                    <span> ¥{{ item.zkmoney }}</span>
                  </div>
                </template>
              </div>
            </div>
            <!-- <div class="paylist">
              <span class="paytext">收入金币</span>
              <span>¥{{ realAmount }}</span>
            </div> -->
            <div class="paylist2">
              <span class="colordiffrent">¥{{ realAmount }}</span>
              <span class="paytext">实付金额</span>
            </div>
          </section>
        </a-spin>
      </div>
      <div class="steps-action">
        <a-button v-if="current < steps.length - 1" type="primary" @click="next">
          下一步
        </a-button>
        <a-button v-if="current == steps.length - 1" type="primary" @click="submitbtn" :loading="subLoading">
          结算
        </a-button>
        <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
          上一步
        </a-button>
      </div>
    </a-modal>
    <a-modal v-model="visibleVoucher" title="请选择优惠" :footer="null" centered destroyOnClose>
      <a-spin :spinning="loadingVocher">
        <div class="more_than_coupon">
          <div class="use_couponCard" @click="choosecoupon(-1)">
            <span class="iconimg addcircle" v-if="useCouponCard == true"></span>
            <span class="iconimg" v-if="useCouponCard == false"></span>
            <span>不使用优惠</span>
          </div>
          <div class="use_couponCard" v-for="(item, index) in outvoucherlist" @click="choosecoupon(index, item.flag)" :key="index">
            <span class="iconimg addcircle" v-if="item.flag == 'Y'"></span>
            <span class="iconimg" v-if="item.flag == 'S'"></span>
            <span class="iconimg addiconxuanxiang" v-if="item.flag == 'N'"></span>
            <span>
              <span v-if="item.flag == 'N'" class="disabledtext">{{ item.voucherName }}</span>
              <span v-else>{{ item.voucherName }}</span>
              <span v-if="item.remark" :class="item.flag == 'N' ? 'remark-red' : 'remark-blue'" class="remark">
                <img src="../../assets/images/laba.png" alt="" v-if="item.flag == 'S'" class="remark-laba" />{{ item.remark }}</span
              >
            </span>
          </div>
        </div>
        <a-button type="primary" @click="visibleVoucher = false">确定</a-button>
      </a-spin>
    </a-modal>
    <a-modal v-model="visibleStrategy" title="单品促销策略" :footer="null" centered destroyOnClose>
      <div class="more_than_strategy">
        <div class="strategy" v-for="(item, index) of strategyList" :key="item.id">
          <div class="tag-content">
            <span class="tag">{{ item.mprotype | mprotype }}</span>
            <span class="tag">{{ item.distype | distype }}</span>
            <span class="tag" v-if="item.distype != 4 && item.content">{{ actContent(item) }}</span>
          </div>
          <div class="title">{{ item.name }}</div>
          <div class="notice" v-if="item.distype == 4"><img src="../../assets/images/laba.png" alt="" />与BOX满赠不同享</div>
          <div class="time"><img src="../../assets/images/actTime.png" alt="" />{{ item.datebegin }} - {{ item.dateend }}</div>
          <div class="info">
            <p>单据编号：{{ item.prono }} <a-button type="link" :data-clipboard-text="item.prono" @click="copy('prono', index)" :id="`prono-${index}`">复制</a-button></p>
            <p v-if="item.distype == 4">赠品款号：{{ giftResp(item.giftResp) }}</p>
          </div>
        </div>
      </div>
    </a-modal>
    <a-modal v-model="visibleStrategyMutli" title="组合促销策略" :footer="null" centered destroyOnClose>
      <div class="more_than_strategy">
        <div class="strategy" v-for="(item, index) of strategyListMutli" :key="item.id">
          <div class="tag-content">
            <span class="tag">{{ item.mprotype | mprotype }}</span>
            <span class="tag">{{ item.distype | distype }}</span>
            <span class="tag" v-if="item.distype != 4 && item.content">{{ actContent(item) }}</span>
          </div>
          <div class="title">{{ item.name }}</div>
          <div class="notice" v-if="item.distype == 4"><img src="../../assets/images/laba.png" alt="" />与BOX满赠不同享</div>
          <div class="time"><img src="../../assets/images/actTime.png" alt="" />{{ item.datebegin }} - {{ item.dateend }}</div>
          <div class="info">
            <p>单据编号：{{ item.prono }} <a-button type="link" :data-clipboard-text="item.prono" @click="copy('prono', index)" :id="`prono-${index}`">复制</a-button></p>
            <p v-if="item.distype == 4">赠品款号：{{ giftResp(item.giftResp) }}</p>
          </div>
        </div>
      </div>
    </a-modal>
    <a-modal v-model="showRules" :footer="null" centered width="350">
      <div class="rules-content">
        <div class="title">活动规则</div>
        <div class="content">
          8.18-9.18 活动期内每周五、周六、周日全天<br />
          成人装：满2000立减80元，满3500立减200元<br />
          童装：满1650立减50元，满2650元立减100元<br />
          注：成人装包含：JNBY、速写、LESS、APN；童装包含：jnbybyJNBY、蓬马
        </div>
      </div>
    </a-modal>
    <a-modal v-model="showCode" :footer="null" centered :maskClosable="false">
      <a-result title="Great, we have done all the operations!">
        <template #icon>
          <img :src="qrcodeUrl" alt="" />
        </template>
        <template #extra>
          <a-button @click="showCode = false">关闭</a-button>
          <a-button type="link" @click="downloadImg(qrcodeUrl, boxInfo.boxSn + '-付款码')">下载付款码</a-button>
        </template>
      </a-result>
    </a-modal>
  </div>
</template>
<script>
import Clipboard from 'clipboard'
import { onDownFile } from '@/views/box/util/global'
import {
  combineBoxBeforeConfirm,
  boxDetailPriceCondition,
  chooseProductSettlement,
  setShopDiscount,
  orderSubmit,
  calcBoxPrice,
  preferential,
  boxJoinShop,
  joinShop,
  getSecurityDiscount
} from '@/api/box/order'
import ListInfo from '@views/box/components/goodsInfo/listInfo'
const columns = [
  {
    title: '序号',
    align: 'center',
    dataIndex: 'productNo',
    width: '10%'
  },
  {
    title: '商品',
    dataIndex: 'barcode',
    scopedSlots: { customRender: 'goods' },
    width: '53%'
  },
  {
    title: '单价',
    dataIndex: 'productPrice',
    width: '18%',
    scopedSlots: { customRender: 'price' }
  }
]
const columns2 = [
  {
    title: '序号',
    align: 'center',
    dataIndex: 'productNo',
    width: 80
  },
  {
    title: '商品',
    dataIndex: 'barcode',
    scopedSlots: { customRender: 'goods' }
  },
  {
    title: '单价',
    dataIndex: 'productPrice',
    width: 130,
    scopedSlots: { customRender: 'price' }
  },
  {
    title: '操作',
    width: 220,
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    ListInfo
  },
  data() {
    return {
      columns,
      columns2,
      visible: false,
      boxId: '',
      current: 0,
      steps: [{ title: '确认订单' }, { title: '订单支付' }],
      loading: true,
      comfirmGoods: [],
      boxInfo: {},
      selectedRowKeys: [],
      selectedRows: [],
      boxDetailIds: null,
      loadingPay: true,
      editDisount: false,
      curShopDiscount: null,
      shopDiscount: null,
      payGoodsList: [],
      billNo: '',
      totalPrice: 0,
      realAmount: 0,
      discountinfo: [],
      // 积分换券点击切换
      integralCouponCard: false,
      nointegral: false,
      availableIntegral: 0,
      convertibleAmount: 0,
      // 积分换券时候要显示
      inshow: false,
      p_useintegral: false,
      voucherids: [],
      activityReminderText: '', //活动文本
      outvoucherlist: [],
      useCouponCard: true,
      cardDesc: '',
      showRules: false,
      visibleVoucher: false,
      loadingVocher: true,
      // 策略切换
      strategyChange: true,
      showStrategy: false,
      strategyList: [],
      visibleStrategy: false,
      strategyChangeMutli: true,
      showStrategyMutli: false,
      strategyListMutli: [],
      visibleStrategyMutli: false,
      qrcodeUrl: '',
      subLoading: false,
      showCode: false,
      // 商场折扣
      discountChange: false,
      paySpinning: false
    }
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange
      }
    },
    giftResp: () => {
      return giftResp => {
        if (giftResp) {
          return giftResp.name.join(',')
        } else {
          return ''
        }
      }
    },
    actContent: () => {
      return item => {
        if (item.distype == 1) {
          return item.content * 10 + '折'
        } else {
          return item.content
        }
      }
    },
    calcDiscount() {
      return item => {
        let res = Number(item.priceActual) / Number(item.productPrice)
        if (res == 1) {
          return res
        } else {
          return res.toFixed(2)
        }
      }
    },
    calcwWarn() {
      return item => {
        let res = ((Number(item.priceActual) + Number(item.discount3)) / Number(item.productPrice)).toFixed(2)
        if (item.gift) {
          item.warning = false
          return false
        } else {
          if (item.productAttr == 3) {
            item.warning = false
            return false
          } else {
            if (Number(res) >= item.miniDiscount) {
              item.warning = false
              return false
            } else {
              item.warning = true
              return true
            }
          }
        }
      }
    }
  },
  filters: {
    distype(t) {
      //  1打折 2特价 3 优惠, 4-满赠
      if (t == 1) {
        return '打折'
      } else if (t == 2) {
        return '特价'
      } else if (t == 3) {
        return '优惠'
      } else if (t == 4) {
        return '满赠'
      }
    },
    mprotype(t) {
      // 整单 - 3、单品 - 1 、组合 - 2
      if (t == 1) {
        return '单品策略'
      } else if (t == 2) {
        return '组合策略'
      } else if (t == 3) {
        return '整单策略'
      }
    },
    miniDiscount(v) {
      return (v * 100) / 10
    }
  },
  methods: {
    async show(id) {
      this.current = 0
      this.boxId = id
      this.selectedRowKeys = []
      this.selectedRows = []
      this.reset()
      this.visible = true
      let result = await this.fetchData()
      if (result) {
        let list = this.comfirmGoods.map(e => e.id)
        let priceList = await this.getPrice(list)
        if (priceList.length > 0) {
          this.comfirmGoods = this.comfirmGoods.map(item => {
            let result = priceList.filter(e => e.boxDetailsId == item.id)
            if (result.length > 0) {
              return {
                ...item,
                priceActual: result[0].priceActual
              }
            } else {
              let priceActual = null
              if (item.vipPrice) {
                priceActual = item.vipPrice
              } else if (item.productFavorablePrice) {
                priceActual = item.productFavorablePrice
              } else {
                priceActual = item.productPrice
              }
              return {
                ...item,
                priceActual: priceActual
              }
            }
          })
        }
      }
      this.loading = false
    },
    fetchData() {
      let params = {
        requestData: {
          boxId: this.boxId
        }
      }
      return combineBoxBeforeConfirm(params).then(res => {
        if (res.code == 0) {
          this.comfirmGoods = res.data.boxDetailsList
          this.boxInfo = res.data.box
          // this.curShopDiscount = this.boxInfo.shopDiscount ? this.boxInfo.shopDiscount : 1
          return true
        } else {
          this.$message.warning(res.msg)
          return false
        }
      })
    },
    getPrice(list) {
      let params = {
        requestData: {
          boxId: this.boxId,
          detailIdList: list
        }
      }
      return boxDetailPriceCondition(params).then(res => {
        if (res.code == 0) {
          if (res.data.length > 0) {
            let list = res.data
            for (let item of list) {
              item.priceActual = item.priceActual.toFixed(2)
            }
          }
          return res.data
        } else {
          this.$message.warning(res.msg)
          return []
        }
      })
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      // console.log(selectedRows, selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    next() {
      if (this.selectedRows.length < 1) {
        this.$message.warning('请选择要购买的商品')
        return
      }

      this.boxDetailIds = this.selectedRowKeys.join(',')
      this.billNo = ''
      this.current++
      this.payPage()
    },
    prev() {
      this.reset()
      this.current--
    },
    // 重置
    reset() {
      this.billNo = ''
      this.cardDesc = ''
      this.inshow = false
      this.strategyChange = true
      this.strategyChangeMutli = true
      this.strategyList = []
      this.outvoucherlist = []
      this.voucherids = []
      this.discountinfo = []
      this.totalPrice = 0
      this.realAmount = 0
      this.p_useintegral = false
      this.editDisount = false
    },
    async payPage() {
      this.paySpinning = true
      this.loadingPay = true
      await this.getPayDetail()
      if (this.payGoodsList.length) {
        for (let item of this.payGoodsList) {
          let obj = {
            spuId: item.spuId,
            storeId: 417608
          }
          await this.fetchGetSecurityDiscount(obj, item)
        }
      }

      await this.calcPrice(this.billNo)
      this.$forceUpdate()

      this.loadingPay = false
      this.paySpinning = false
    },
    getPayDetail() {
      let params = {
        requestData: {
          unionId: this.boxInfo.unionid,
          boxSn: this.boxInfo.boxSn,
          boxDetailIds: this.boxDetailIds
        }
      }
      return chooseProductSettlement(params).then(res => {
        if (res.code == 0) {
          this.payGoodsList = res.data.productList.map(item => {
            return {
              ...item,
              gift: false,
              joinShopSwitch: item.joinShop == 'Y' || item.joinShop == null
            }
          })
          this.activityReminderText = res.data.activityMsg
          this.discountChange = res.data.ifJoinShop == 'Y'
          this.curShopDiscount = res.data.shopDiscount || 1
          this.shopDiscount = this.curShopDiscount
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 商品安全折扣
    fetchGetSecurityDiscount(obj, item) {
      let params = {
        requestData: obj
      }
      return getSecurityDiscount(params).then(res => {
        if (res.code == 0) {
          item.miniDiscount = res.data
        } else {
          this.$toast(res.msg)
        }
      })
    },
    // 商场折扣服务单开关
    async switchDiscount() {
      this.paySpinning = true
      if (this.discountChange) {
        for (let item of this.payGoodsList) {
          item.joinShopSwitch = true
        }
      } else {
        for (let item of this.payGoodsList) {
          item.joinShopSwitch = false
        }
      }
      await this.resetFavourable()
    },
    // 修改服务单商场折扣
    completeDiscount() {
      if (this.shopDiscount == '' || this.shopDiscount == null) {
      } else {
        this.curShopDiscount = this.shopDiscount
      }
      this.editDisount = false

      this.switchDiscount()
      /* let params = {
        requestData: {
          boxId: this.boxId,
          shopDiscount: this.shopDiscount
        }
      }
      setShopDiscount(params).then(res => {
        if (res.code == 0) {
          this.curShopDiscount = this.shopDiscount
          this.editDisount = false
        } else {
          this.$message(res.msg)
        }
      }) */
    },
    // 商品切换商场折扣
    async goodJoinShop(item) {
      console.log(item)
      this.paySpinning = true
      await this.resetFavourable()
    },
    // 重置策略&优惠
    async resetFavourable() {
      this.$message.loading('正在重新计算优惠价')
      this.strategyChange = true
      this.strategyChangeMutli = true
      if (this.strategyChange || this.strategyChangeMutli) {
        for (var i = 0; i < this.outvoucherlist.length; i++) {
          if (this.outvoucherlist[i].flag == 'Y') {
            this.outvoucherlist[i].flag = 'S'
          }
        }
        this.useCouponCard = false
      }
      await this.calcPrice(this.billNo)
    },
    // 价格计算
    calcPrice(billNo) {
      let voucheritem = []
      if (this.outvoucherlist.length > 0) {
        let result = this.outvoucherlist.filter(e => e.flag == 'Y')
        if (result.length > 0) {
          voucheritem = result.map(j => j.rowNo)
        }
      }
      let boxDetailList = []
      if (billNo == '') {
        boxDetailList = this.payGoodsList.map(e => {
          return {
            id: e.id
          }
        })
      } else {
        boxDetailList = this.payGoodsList.map(e => {
          return {
            changePrice: null,
            id: e.id,
            joinShop: e.joinShopSwitch ? 'Y' : 'N'
          }
        })
      }
      let params = {
        requestData: {
          billNo: billNo,
          // boxDetailIds: this.boxDetailIds.split(','),
          boxId: this.boxId,
          useIntegral: this.p_useintegral,
          voucherList: voucheritem,
          strategy: this.strategyChange ? 'Y' : 'N',
          wholeStrategy: this.strategyChangeMutli ? 'Y' : 'N',
          boxDetailList: boxDetailList,
          isShopVip: this.discountChange ? 'Y' : 'N',
          shopDiscount: this.discountChange ? this.curShopDiscount : null
        }
      }
      return calcBoxPrice(params).then(res => {
        if (res.code == 0) {
          this.billNo = res.data.billNo
          this.getStrategy()
          this.discountinfo = res.data.outDiscount.discountitem
          this.realAmount = Number(res.data.outGoods.totpriceactual)
          this.totalPrice = Number(res.data.outGoods.totpricelist)

          if (res.data.integral.availableIntegral == 0) {
            this.inshow = false
          } else {
            this.inshow = true
            this.availableIntegral = res.data.integral.availableIntegral
            this.convertibleAmount = res.data.integral.convertibleAmount
          }
          /*
           * 积分为0且为flag为Y时，关闭积分开关
           */
          if (res.data.integral.availableIntegral == 0 && res.data.integral.flag == 'Y') {
            this.integralCouponCard = false
            this.p_useintegral = false
            this.calcPrice(this.billNo)
            return
          }

          let desc = ''
          let desc2 = ''
          for (var j = 0; j < res.data.outDiscount.discountitem.length; j++) {
            if (res.data.outDiscount.discountitem[j].zktype == '3') {
              desc = res.data.outDiscount.discountitem[j].zkmoney
            } else if (res.data.outDiscount.discountitem[j].zktype == '4') {
              desc = res.data.outDiscount.discountitem[j].zkmoney
            }
          }

          // 表示无优惠券
          if (res.data.voucherList.length == 0) {
            this.cardDesc = null
            this.outvoucherlist = []
          } else {
            this.outvoucherlist = res.data.voucherList.filter(e => e.flag != 'F')
            if (voucheritem.length == 0) {
              this.cardDesc = ''
            } else {
              if (this.p_useintegral && this.useCouponCard == false) {
                this.cardDesc = ''
              } else if (!this.p_useintegral && this.useCouponCard == true) {
                this.cardDesc = '不使用优惠券'
              } else if (!this.p_useintegral && this.useCouponCard == false) {
                if (desc != '') {
                  this.cardDesc = '- ¥ ' + desc
                  console.log(desc)
                } else {
                  this.cardDesc = ''
                }
              }
            }
          }

          let goodsPrice = res.data.outGoods.goodsItem
          for (let item of this.payGoodsList) {
            item.gift = false
            let priceItem = goodsPrice.filter(e => e.skuid == item.skuId)
            if (priceItem.length > 0) {
              item.priceActual = priceItem[0].priceactual.toFixed(2)
              item.gift = priceItem[0].discount9 > 0
              item.discount3 = priceItem[0].discount3
            }
          }
        } else {
          this.$message.warning(res.msg)
        }
        this.loadingVocher = false
        this.paySpinning = false
      })
    },
    // 积分换券开关
    switchchange: function(checked) {
      this.paySpinning = true
      this.loadingVocher = true
      var _this = this
      if (checked) {
        this.integralCouponCard = true
        this.p_useintegral = true
        setTimeout(function() {
          _this.calcPrice(_this.billNo)
        }, 100)
      } else {
        this.integralCouponCard = false
        this.p_useintegral = false
        setTimeout(function() {
          _this.calcPrice(_this.billNo)
        }, 100)
      }
    },
    // 选择优惠券
    choosecoupon(index, flag) {
      if (flag == 'N') return
      this.loadingVocher = true
      var list = this.outvoucherlist
      if (index == -1) {
        // this.integralCouponCard = false
        for (var i = 0; i < list.length; i++) {
          if (list[i].flag == 'Y') {
            list[i].flag = 'S'
          }
        }
        this.outvoucherlist = list
        if (!this.useCouponCard) {
          // 选中
          this.useCouponCard = true
        } else {
          // 未选中
          this.useCouponCard = false
        }
        this.calcPrice(this.billNo)
      } else {
        this.useCouponCard = false
        if (list[index].flag == 'S') {
          list[index].flag = 'Y'
          this.outvoucherlist = list
          this.calcPrice(this.billNo)
        } else if (list[index].flag == 'Y') {
          list[index].flag = 'S'
          this.outvoucherlist = list
          this.calcPrice(this.billNo)
        } else {
          this.getStrategy()
        }
      }
    },
    // 策略开关
    async switchStrategy(checked) {
      this.strategyChange = checked
      /*
       *  打开后优惠券恢复初始
       */
      if (this.strategyChange) {
        this.$message.loading('将初始化优惠券')
        for (var i = 0; i < this.outvoucherlist.length; i++) {
          if (this.outvoucherlist[i].flag == 'Y') {
            this.outvoucherlist[i].flag = 'S'
          }
        }
        this.useCouponCard = false
      }
      await this.calcPrice(this.billNo)
      // if (checked) await this.getStrategy()
    },
    async switchStrategyMutli(checked) {
      this.strategyChangeMutli = checked
      /*
       *  打开后优惠券恢复初始
       */
      if (this.strategyChangeMutli) {
        this.$message.loading('将初始化优惠券')
        for (var i = 0; i < this.outvoucherlist.length; i++) {
          if (this.outvoucherlist[i].flag == 'Y') {
            this.outvoucherlist[i].flag = 'S'
          }
        }
        this.useCouponCard = false
      }
      await this.calcPrice(this.billNo)
      // if (checked) await this.getStrategy()
    },
    getStrategy() {
      return preferential(this.billNo, 3).then(res => {
        if (res.code == 0) {
          this.strategyList = res.data.filter(e => e.mprotype == 1)
          this.strategyListMutli = res.data.filter(e => e.mprotype == 2 || e.mprotype == 3)
        } else {
          this.$toast(res.msg)
          this.strategyList = []
        }
      })
    },
    openStrategy() {
      if (this.strategyList.length == 0) {
        this.$message('暂无优惠策略')
      }
      this.visibleStrategy = true
    },
    openStrategyMutli() {
      if (this.strategyListMutli.length == 0) {
        this.$toast('暂无优惠策略')
        return
      }
      this.visibleStrategyMutli = true
    },
    copy(id, index) {
      let tag = `#${id}-${index}`
      var clipboard = new Clipboard(tag)
      clipboard.on('success', e => {
        console.log(e)
        this.$message.success('复制成功')
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        console.log(e)
        // 不支持复制
        console.log('复制失败')
        // 释放内存
        clipboard.destroy()
      })
    },
    submitbtn: function() {
      /* 校验商品低于安全折扣 */
      let warningList = this.payGoodsList.filter(e => e.warning)
      if (warningList.length > 0) {
        this.$message.warning('商品低于安全折扣')
        return
      }
      /* 校验商品低于安全折扣 */
      this.subLoading = true
      let arrvouid = []
      let vList = this.outvoucherlist.filter(item => item.flag == 'Y')
      if (vList.length > 0) {
        arrvouid = vList.map(item => item.rowNo)
      }
      let arrvouidText = arrvouid.length > 0 ? arrvouid.join(',') : ''

      var productlist = JSON.stringify(this.payGoodsList)

      let detailList = this.payGoodsList.map(e => {
        return {
          id: e.id,
          changePrice: null,
          joinShop: e.joinShopSwitch ? 'Y' : 'N'
        }
      })
      let data = {
        requestData: {
          // boxDetailIds: this.boxDetailIds.split(','),
          boxSn: this.boxInfo.boxSn,
          integral: this.integralCouponCard,
          voucherId: arrvouidText,
          isParticipate: this.strategyChange ? 'Y' : 'N',
          detailList: detailList,
          isShopVip: this.discountChange ? 'Y' : 'N',
          shopDiscount: this.discountChange ? this.curShopDiscount : null,
          wholeStrategy: this.strategyChangeMutli ? 'Y' : 'N'
        }
      }
      console.log(data)
      // this.toast = this.$message.loading({
      //   duration: 0, // 持续展示 toast
      //   forbidClick: true,
      //   message: '生成中'
      // })
      orderSubmit(data).then(res => {
        if (res.code == 0) {
          this.qrcodeUrl = res.data.qrcodeUrl + '?any_string_is_ok'
          console.log(this.qrcodeUrl)
          this.showCode = true
          /* this.DateTime = getYMD(res.data.createTime)
          setTimeout(() => {
            self.shoePayImg()
            self.toast.clear()
          }, 1000) */

          /* this.$router.push({
            name: 'OrderPaySuccess',
            query: {
              codeurl: res.data.data.qrcode_url,
              boxid: this.boxId,
              freeback: res.data.freeBack
            }
          }) */
        } else if (res.code == -18) {
          this.$message(res.msg)
        } else {
          this.$message('提交失败')
        }
        this.subLoading = false
      })
    },
    downloadImg(url, name) {
      onDownFile(url, name)
    }
  }
}
</script>
<style src="../less/modal.less" lang="less" scoped></style>
<style lang="less" scoped>
.return-modal {
  /deep/ .ant-modal-body {
    max-height: 800px;
  }
}
.steps-action {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}
.steps-content {
  margin-top: 24px;
}
.red {
  color: #f45555;
  margin-right: 24px;
  font-size: 20px;
}
.special-price {
  font-size: 14px;
  // margin-bottom: 4px;
  margin-right: 0;
}
.has-special {
  text-decoration: line-through;
}
.origin-price,
.special-price {
  margin-bottom: 4px;
}
.paneldetail {
  border-bottom: 1px dashed #dedede;
}

.coupon_wrap {
  padding: 16px 0 0 0;
  background: #fff;
  margin-bottom: 12px;
  border-radius: 5px;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  span {
    font-size: 14px;
    margin-right: 12px;
  }
  .name {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 500;
    color: #000000;
  }
  .dikou {
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
  }
  .sales {
    margin-right: 12px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9b9b9b;
  }
}
.use_couponCard {
  cursor: pointer;
  line-height: 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;

  .remark {
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    line-height: 17px;
    margin-left: 8px;
  }
  .remark-red {
    color: #ff5f5f;
  }
  .remark-blue {
    color: #1375f2;
  }
  .remark-laba {
    width: 16px;
    margin-top: -2px;
  }
}

.iconimg {
  width: 18px;
  height: 18px;
  display: block;
  background: url('../../assets/images/icon_radio.png') no-repeat;
  background-size: 100% 100%;
  float: left;
  margin-right: 12px;
}
.addiconxuanxiang {
  background: url('../../assets/images/icon_radio_dis.png') no-repeat;
  background-size: 100% 100%;
}

.addcircle {
  background: url('../../assets/images/icon_radio_check.png') no-repeat;
  background-size: 100% 100%;
}
.disabledtext {
  color: #cdcdcd;
}
.more_than_coupon {
  margin-bottom: 48px;
}
.gift {
  width: 28px;
  height: 18px;
  background: rgba(255, 186, 0, 0.2);
  border-radius: 4px;
  font-size: 10px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ff8b00;
  line-height: 18px;
  display: inline-block;
  text-align: center;
}
.gift-ab {
  position: absolute;
  z-index: 2;
  right: 0;
}
.strategy_wrap {
  clear: both;
  padding: 16px 0 0 0;
  margin-bottom: 0;
  span {
    font-size: 14px !important;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 20px;
  }
  .blue {
    color: #1375f2;
    margin-right: 0;
  }
}
.strategy_wrap:last-child {
  padding-bottom: 16px;
}
.strategy-container {
  background: #f4f7fb;
  height: 500px !important;
  padding: 0;
  .pop-title {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1d2741;
    line-height: 52px;
    text-align: center;
    background: #fff;
  }
}

.more_than_strategy {
  padding: 16px 0;
  // height: 410px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.strategy {
  width: 343px;
  margin: 0 auto;
  background: #fff;
  padding: 12px;
  border-radius: 12px;
  box-sizing: border-box;
  margin-bottom: 16px;
  border: 1px solid #dedfe1;
  .tag-content {
    margin-bottom: 12px;
    .tag {
      height: 18px;
      background: rgba(255, 186, 0, 0.2);
      border-radius: 4px;
      padding: 4px;
      box-sizing: border-box;
      font-size: 10px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ff8b00;
      line-height: 10px;
      margin-right: 6px;
      display: inline-block;
    }
  }
  .title {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #090b1b;
    line-height: 20px;
    margin-bottom: 12px;
  }
  .notice {
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1375f2;
    line-height: 17px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    img {
      width: 16px;
      margin-right: 6px;
    }
  }
  .time {
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #474747;
    line-height: 17px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    img {
      width: 20px;
      margin-right: 6px;
    }
  }
  .info {
    width: 319px;
    background: #f4f7fb;
    border-radius: 4px;
    padding: 10px 12px;
    box-sizing: border-box;
    p {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #090b1b;
      line-height: 17px;
      margin-bottom: 8px;
      line-height: 32px;
      /deep/.ant-btn-link {
        line-height: 32px;
        padding: 0 4px;
        font-size: 12px;
      }
    }
    p:last-child {
      margin-bottom: 0;
    }
  }
}
.paylist {
  margin-bottom: 12px;
  overflow: hidden;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #9b9b9b;
  line-height: 20px;
  span {
    color: #9b9b9b;
    display: block;
  }
  > span:nth-child(2) {
    float: right;
  }
}

.paylist2 {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #383333;
  line-height: 20px;
  overflow: hidden;
  margin-bottom: 12px;
  span {
    color: #000000;
    font-size: 14px;
    float: right;
  }
  .colordiffrent {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff5151;
    float: right;
  }
}

.paylist .paytext,
.paylist2 .paytext {
  width: 68px;
  margin-right: 18px;
  display: inline-block;
  color: #000000;
}
.paylist {
  .paytext {
    width: auto;
    float: left;
  }
  .activity {
    clear: both;
    background: #f4f7fb;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
  }
}
.rules-content {
  width: 310px;
  background: #fff;
  position: relative;
  padding: 24px 16px;
  box-sizing: border-box;
  .close {
    position: absolute;
    font-size: 16px;
    right: 12px;
    top: 12px;
  }
  .title {
    height: 20px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #323233;
    line-height: 20px;
    text-align: center;
    margin-bottom: 16px;
  }
  .content {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 20px;
  }
}
.good-status {
  img {
    width: 15px;
    margin-right: 8px;
  }
  .discount,
  .warning {
    margin-bottom: 6px;
  }
}
</style>

